<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding-top: 40vh; */
  }

  body {
    font-family: Arial, sans-serif;
    line-height: 1.4;
    font-size: 12px;
    background-color: black;
  }

  /* 暗黑模式  夜间模式 */
  @media (prefers-color-scheme: dark) {
    body {
      font-family: Arial, sans-serif;
      background-color: white;
    }
  }

  /* 高分辨率显示 */
  @media (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    body {
      font-size: 150%;
    }
  }

  .card111 {
    filter: blur(4px);
  }

  .img_audio_wrap {
    position: relative;
    overflow: hidden;
  }

  .myAudio {
    position: absolute;
    height: inherit;
    width: 100%;
    left: 0;
    top: 0;
    margin-top: -40px;
    margin-left: 0;
    font-size: 100vw;
    text-align: left;
    overflow: hidden;
    opacity: 0;
  }

  #img {
    /* padding-top: 100%; */
  }

  #container_eudic_note p {
    padding: 0px 0;
    margin: 0 0;
    font-size: 10px;
  }


  #container_eudic_note {
    color: white;
    /* border: 1px solid #ccc; */
    padding: 14px;
    border-radius: 10px;
    min-height: 100px;
    background-color: hsla(0, 0%, 98%, 0.2);
    text-align: left;
    font-size: 12px;
    line-height: 1.8;
  }

  .note-content {
    color: black;
    /* background-color: hsla(0, 0%, 98%, 0.2); */
    /* background-color: #e6f7ff; */
    background-color: hsla(199, 100%, 95%, 0.8);
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    /* border: 1px solid #b3e0ff; */
  }

  /* 新增样式用于输入框 */
  #token-input-container_eudic_note {
    margin-top: 20px;
    padding: 15px;
    background-color: hsla(0, 0%, 98%, 0.2);
    /* background-color: #fafafa; */
    /* border: 1px solid #ddd; */
    border-radius: 10px;
    text-align: left;
  }

  #token-input-container_eudic_note label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: white;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
  }

  #token-input {
    width: 95%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
    text-align: left;
  }

  #token-input:focus {
    outline: none;
    border-color: #007bff;
  }

  /* 动态数据高亮样式 */
  .highlight-id {
    display: inline-block;
    font-family: monospace;
    font-weight: bold;
    font-size: 20px;
    background: linear-gradient(to right, #38ef7d, #11998e);
    /* 绿青渐变 */
    background-clip: text;
    /* 背景裁剪为文字形状 */
    -webkit-background-clip: text;
    background-clip: text;
    /* 防止渐变重复（可选） */
    background-size: 100% 100%;
    color: transparent;
  }


  #container_eudic_note h2 {
    padding: 4px 0;
    margin: -8px 0 0 0;
    font-size: 18px;
    font-weight: bold;
  }

  /* 用于高亮 #xxxx 的样式 */
  span.mark {
    /* width: auto; */
    /* height: auto; */
    display: inline;
    color: #333;
    margin-left: -2px;
    margin-bottom: 40px;
  }

  /* 清除浮动 */
  /* span.mark::after {
    content: '';
    clear: both;
    visibility: hidden;
    height: 0;
    display: block;
  }   */

  span.mark b {
    border-radius: 4px;
    background-color: #ffeb3b;
    padding: 2px 4px;
  }

  .textwrap {
    width: 100%;
    text-align: center;
    margin: 0px auto;
    padding: 0 20px;
    /* background-color: #ecf0f1; */
    /* border: 2px solid #3498db; */
  }
</style>

<div class="container">
  <div class="textwrap" style='text-decoration:none;text-align: center;'>
    <div class="primary textfit">{{单词}} </div>
    <div class="primary textfit" style="font-family:'Lucida Sans Unicode',Arial">{{音标}}</div>
  </div>

  <br>
  <span class="primary" style="font-family:'Lucida Sans Unicode',Arial;font-size: 20px;">{{Audio}}</span>
</div>
<br>

<div id="container_eudic_note">
  <p>正在检查本地存储中的授权令牌...</p>
</div>

<div id="token-input-container_eudic_note">
  <label for="token-input">授权令牌 (Authorization Token)</label>
  <input type="text" id="token-input" placeholder="请输入您的授权令牌" />
</div>
<br>



<script>
  document.addEventListener('DOMContentLoaded', () => {
    const INITIAL_FONT_SIZE = 48;
    const TOLERANCE = 10;

    const textwraps = document.querySelectorAll('.textwrap');
    const textElements = document.querySelectorAll('.textfit');

    // 设置容器样式
    textwraps.forEach((textwrap, index) => {
      // let width = '500px';
      // if (index === 1) {
      //   width = '300px';
      // }
      // width: ${ width };
      // padding: 10px;
      // border: 2px solid #3498db;
      // background-olor: #ecf0f1;
      // text - align: center;

      textwrap.style.cssText = `
    
          box-sizing: border-box;
        `;
    });

    // display: inline-block;
    // 设置文字元素样式
    textElements.forEach(element => {
      element.style.cssText = `
          font-size: ${INITIAL_FONT_SIZE}px;
          font-weight: bold;
          color: #FF80DD;
          white-space: nowrap;
          overflow: hidden;
          line-height: 1.2;
        `;
    });

    // 动态缩放文字的核心函数
    function fitText() {
      textElements.forEach(textElement => {
        const textwrap = textElement.parentElement;
        const textwrapWidth = textwrap.offsetWidth - parseFloat(getComputedStyle(textwrap).paddingLeft) - parseFloat(getComputedStyle(textwrap).paddingRight);

        textElement.style.fontSize = `${INITIAL_FONT_SIZE}px`;
        const textWidth = textElement.scrollWidth;

        if (textWidth === 0) {
          return;
        }

        if (textWidth > textwrapWidth + TOLERANCE) {
          const newFontSize = (textwrapWidth / textWidth) * INITIAL_FONT_SIZE;
          textElement.style.fontSize = `${newFontSize}px`;
        }
      });
    }

    // 注册事件监听器
    // 1. 页面加载完成时
    window.addEventListener('load', fitText);
    // 2. 窗口大小改变时（包括桌面端和移动端旋转）
    window.addEventListener('resize', fitText);
    // 3. 字体加载完成时（确保在外部字体加载后计算正确）
    window.addEventListener('fontresize', fitText);

    // 监听DOM变化，确保文字内容动态更新时也能正确缩放
    const observer = new MutationObserver(fitText);
    const config = { childList: true, subtree: true, characterData: true };
    textElements.forEach(element => observer.observe(element, config));

    // 立即执行一次，确保初始状态正确
    fitText();
  });
</script>


<script>
  function CONFIG() {
    // --- 以下为设置里的预设项，根据个人需求调整 --- //
    const settings = {
      lang: 'zh-Hans',      // 显示语言: 'zh-Hans' 简体中文 | 'zh-Hant' 繁体中文
      dict: {
        ios: 'moji',        // 在 iOS 使用 MOji 辞書
        android: 'eudic',    // 在 Android 使用 MOji 辞書
        mac: 'dict',        // 在 macOS 使用系统自带的词典
        win: 'goldendict',  // 在 Windows 使用 GoldenDict-ng 词典
        other: 'weblio',    // 在其他平台使用 Weblio 国語辞典
      },
      display: 'default',   // 正面单词显示: 'default' 显示汉字和注音假名 | 'kana' 只显示假名 | 'kanji' 只显示汉字
      playback: 'force',    // 背面播放设置: 'default' 跟随牌组的系统设置 | 'force' 强制只播放单词音频
      autoCopy: {           // 背面自动复制: true 开启 | false 关闭
        ipad: true,
        iphone: false,
        ankiweb: false,
      },
      tts: {
        enable: 'fallback', // 在线 TTS 开关: 'always' 始终开启 | 'fallback' 无本地音频时启用 | 'never' 始终关闭
        hotkey: 'G',        // 播放快捷键，仅支持桌面端
        domain: [
          // 可以添加更多域名，按顺序依次尝试播放
          'https://anki.0w0.live/',
          'https://ms-ra-forwarder-for-ifreetime-v9q1.vercel.app/',
        ],
        params: {
          voiceName: 'ja-JP-KeitaNeural,ja-JP-NanamiNeural', // 语音为多个时随机选择一个
          speed: -4, // 语速范围 -50 到 100，0 为正常语速
        }
      }
    }
    // --- 以下为词典预设项，新增词典参考格式添加 --- //
    const dictOptions = {
      'dict': 'dict://{query}',                                     // macOS 词典 [mac]
      // 'eudic': 'eudic://dict/{query}',                              // Eudic 欧路词典 [win|mac|ios|android]
      // Eudic 欧路词典弹窗 [win|mac|ios|android]
      // 'eudic': 'intent:peek#Intent;action=colordict.intent.action.SEARCH;category=android.intent.category.DEFAULT;type=text/plain;component=com.eusoft.eudic/com.eusoft.dict.activity.dict.LightpeekActivity;scheme=eudic;S.EXTRA_QUERY={query};end',
      'eudic': 'intent:peek#Intent;action=colordict.intent.action.SEARCH;category=android.intent.category.DEFAULT;type=text/plain;component=com.eusoft.trans.en/com.eusoft.dict.activity.dict.LightpeekActivity;scheme=eudic;S.EXTRA_QUERY={query};end',
      'goldendict': 'goldendict://{query}',                         // GoldenDict-ng 词典 [win]
      'dicttango': 'dttp://app.dicttango/WordLookup?word={query}',  // DictTango [android]
      'monokakido': 'mkdictionaries:///?text={query}',              // Monokakido 物書堂 [mac|ios]
      'moji': 'mojisho://?search={query}',                          // MOJi 辞書 [ios|android]
      'mojidict': 'https://www.mojidict.com/searchText/{query}',    // MOJi 辞書网页版 [web]
      'google': 'https://www.google.com/search?q={query}',          // Google Search [web]
      'weblio': 'https://www.weblio.jp/content/{query}',            // Weblio 国語辞典 [web]
      'weblioCJJC': 'https://cjjc.weblio.jp/content/{query}',       // Weblio 日中中日 [web]
      'takoboto': 'https://takoboto.jp/?q={query}',                 // Takoboto [web]
      'mazii': 'https://mazii.net/zh-TW/search/word/jatw/{query}',  // Mazii [web]
      'jisho': 'https://jisho.org/search/{query}',                  // Jisho [web]
      'kotobank': 'https://kotobank.jp/search?q={query}',           // Kotobank [web]
      'goo': 'https://dictionary.goo.ne.jp/srch/all/{query}/m0u/',  // Goo 辞書 [web]
    }

    return { settings, dictOptions }
  }

  function getTranslation(key) {
    const translations = {
      feedback: {
        'zh-Hans': '反馈',
        'zh-Hant': '反饋',
      },
      dictionaryTip: {
        'zh-Hans': '未配置适用于此平台的词典',
        'zh-Hant': '未配置適用於此平台的詞典',
      },
      updateReminder: {
        'zh-Hans': '请更新至最新版后再提交反馈',
        'zh-Hant': '請更新至最新版後再提交反饋',
      },
      versionCurrent: {
        'zh-Hans': '当前版本',
        'zh-Hant': '當前版本',
      },
      versionLatest: {
        'zh-Hans': '最新版本',
        'zh-Hant': '最新版本',
      },
      updateDetails: {
        'zh-Hans': '更新说明',
        'zh-Hant': '更新說明',
      },
      cardFeedback: {
        'zh-Hans': '卡片反馈',
        'zh-Hant': '卡片反饋',
      },
      cardInfo: {
        'zh-Hans': '卡片信息',
        'zh-Hant': '卡片資訊',
      },
      cardVersion: {
        'zh-Hans': '卡片版本',
        'zh-Hant': '卡片版本',
      },
      feedbackContent: {
        'zh-Hans': '反馈内容',
        'zh-Hant': '反饋內容',
      }
    }
    const lang = CONFIG().settings.lang
    return translations[key]?.[lang] || ''
  }

  function getToday() {
    return new Date().toLocaleDateString('sv-SE')
  }

  function setStorage(value) {
    Object.keys(localStorage)
      .filter(key => key.startsWith('JLPT_'))
      .forEach(key => localStorage.removeItem(key))
    const key = `JLPT_${getToday()}`
    localStorage.setItem(key, JSON.stringify(value))
  }

  function getStorage() {
    const key = `JLPT_${getToday()}`
    return JSON.parse(localStorage.getItem(key)) || {}
  }

  function getCurrentVersion(tags = '{{Tags}}') {
    return tags.split(/\s+|::/).find(part => part.startsWith('v')) || ''
  }

  async function getLatestReleaseInfo() {
    let latest, info
    try {
      const response = await fetch('https://api.github.com/repos/5mdld/anki-jlpt-decks/releases/latest')
      if (!response.ok) throw new Error(response.status)

      const data = await response.json()
      latest = `v${data.tag_name?.split('_')[0].replace(/^v/, '')}`
      info = data.body?.replace(/`(.*?)`/g, (match, p1) => `<code>${p1}</code>`)
        .replace(/\r?\n/g, '<br>')
        .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
        .replace(/(\s+)-(?!(?:[^<]*>|[^<>]*<\/code>))/g, '$1◦')
        .replace(/-(?!(?:[^<]*>|[^<>]*<\/code>))/g, '▪')
    } catch (err) {
      console.error(err)
    }
    return { latest, info }
  }


  function getPlatform() {
    return ['ios', 'android', 'mac', 'win'].find(p => document.documentElement.className.includes(p)) || 'other'
  }

  function getDevice() {
    if (isAnkiWeb()) return 'ankiweb'
    return ['iphone', 'ipad'].find(p => document.documentElement.className.includes(p)) || 'other'
  }

  function isAndroid() {
    return !!document.documentElement.className.includes('android')
  }

  function isAnkiWeb() {
    return !!document.getElementById('quiz')
  }

  function isBackSide() {
    return !!document.getElementById('BackSide')
  }


  function cleanWord(word) {
    // const word = "你好<ruby><rb>世界</rb><rt>せかい</rt></ruby>，这一个<ruby><rb>测试</rb><rt>テスト</rt></ruby>。<ruby>其他<rb>数据</rb>和<rt>注音</rt></ruby>";
    // const word = "<ruby><rb>毎</rb><rt>まい</rt></ruby><ruby><rb>朝</rb><rt>あさ</rt></ruby>";
    // const word = "きます<ruby><rb>起</rb><rt>お</rt></ruby>きます";
    // const word = "行く<ruby><rb>行</rb><rt>い</rt></ruby>";
    // const word = "<ruby><rb>朝</rb><rt>あさ</rt></ruby>";
    // const text = "你好<ruby><rb>世界</rb><rt>せかい</rt></ruby>，这一个<ruby><rb>测试</rb><rt>テスト</rt></ruby>。<ruby><rb>勉</rb><rt>べん</rt></ruby><ruby><rb>強</rb><rt>きょう</rt></ruby>します";

    // 正则表达式：
    // 这一个正则表达式是关键，它通过逻辑或（|）来匹配所有需要移除的元素：
    // 1. `<ruby>|<\/ruby>`：匹配 `<ruby>` 和 `</ruby>` 标签。
    // 2. `|<rt>.*?<\/rt>`：匹配 `<rt>...</rt>` 标签。
    // 3. `|<rb>|<\/rb>`：匹配 `<rb>` 和 `</rb>` 标签。
    const regex = /<ruby>|<\/ruby>|<rt>.*?<\/rt>|<rb>|<\/rb>/g;

    // 使用 replace() 方法将所有匹配到的内容替换成空字符串
    const result = word.replace(regex, '').replace(/\s+/g, '')
    // console.log(result);
    // 最终输出：你好世界，这一个测试。勉強します
    return result
  }


  function lookUp(dom) {
    const cleaned = cleanWord(dom.innerHTML || "")
    console.log(dom, dom.innerHTML, cleaned, `打印输出`)
    const dict = CONFIG().settings.dict[getPlatform()]
    const scheme = CONFIG().dictOptions[dict]
    if (!scheme) {
      createDialog({
        content: `<p class="text-center">${getTranslation('dictionaryTip')}</p>`,
        cancelText: '取消',
        confirmText: '查看文档',
        onConfirm: () => {
          document.querySelector('a.ConfirmButton').href = 'https://github.com/5mdld/anki-jlpt-decks/blob/main/README.md'
          closeDialog()
        }
      })
    }
    window.location.href = scheme.replace('{query}', encodeURIComponent(cleaned))
  }


  function setupCard() {
    // lookUp()
    // feedback()
    // setLang()
    // setType()
    // markWords()
    // hideKanji()
    // removeSpaces()
    // checkVersion()
  }
  setupCard()
</script>


<script>
  let lastClickTime = 0;
  let dblclickInterval = 320
  let decorateFn = function (dom, domDelegation) {
    let fn = dom["addEventListener"]
    let timer;
    dom["addEventListener"] = function (handle, callback, AddEventListenerOptions) {
      fn("click", function (e, a1) {
        let currentTime = new Date().getTime();
        if (!timer) {
          timer = setTimeout(() => {
            timer = null
            callback.bind(dom)(e, a1)
            clearTimeout(timer)
          }, dblclickInterval);
        }
        if (currentTime - lastClickTime < dblclickInterval) { // 默认自定义间隔300ms
          console.log("清除清时期", `打印输出`)
          clearTimeout(timer)
          timer = null
          if (event.target.matches('div.scheme_seach') || event.target.parentNode.matches("div.scheme_seach")) {
            lookUp(event.target)
          }
        }
        lastClickTime = currentTime;
      }, AddEventListenerOptions)
    }
    return dom
  }


  decorateFn(document)
  document.addEventListener('click', function (e) {
    // console.log(e.target, `打印输出`)
    // 获取点击位置的单词
    var word = getWordAtPoint(e.clientX, e.clientY);
    console.log(word, `获取点击位置的单词`)
    if (word) {
      // 调用eudic://dict/${word}
      // window.location.href = `intent:peek#Intent;action=colordict.intent.action.SEARCH;category=android.intent.category.DEFAULT;type=text/plain;component=com.eusoft.eudic/com.eusoft.dict.activity.dict.LightpeekActivity;scheme=eudic;S.EXTRA_QUERY=${word};end`;
      const dict = CONFIG().settings.dict[getPlatform()]
      const scheme = CONFIG().dictOptions[dict]
      window.location.href = scheme.replace('{query}', word)
    }
  }, true);

  function getWordAtPoint(x, y) {
    if (document.caretRangeFromPoint) {
      var range = document.caretRangeFromPoint(x, y);
      var textNode = range.startContainer;
      var text = textNode.data;
      var position = range.startOffset;
      // console.log(range, position, `打印输出`)
      if (!text) return null;

      // 向前和向后扫描，直到找到单词的边界
      var start = position, end = position;
      while (start > 0 && /\S/.test(text[start - 1])) {
        start--;
      }
      while (end < text.length && /\S/.test(text[end])) {
        end++;
      }

      return text.substring(start, end);
    }
    return null;
  }
</script>


<script>
  // 移除 HTML 注释的函数
  function removeHtmlComments(htmlString) {
    // return htmlString.replace(/ /g, '');
    return htmlString;
  }

  // 高亮函数：查找并高亮 <b>#xxxx</b> 格式的文本
  function highlightBoldHashtags(noteString) {
    if (typeof noteString !== 'string') {
      console.error("输入必须是一个字符串。");
      return "";
    }
    const regex = /(<b>)(#.*?)(<\/b>)/g;
    const highlightedString = noteString.replaceAll(regex, (match, before, hashtag, after) => {
      const highlightedHashtag = `<span class="mark">${before + hashtag + after}</span>`;
      console.log(hashtag, before, after, `hashtag,before,after`)
      console.log(highlightedHashtag, `highlightedHashtag`)
      return highlightedHashtag;
    });
    return highlightedString;
  }

  // 主逻辑代码
  const hardcodedToken = 'NIS Sm+T1/9gRLRjfHiRvbxgRv+1ezMgisDaEfYHjBnHOxN3gHQ==';
  const apiUrl = 'https://api.frdic.com/api/open/v1/studylist/note';
  const wordToSearch = '{{单词}}';
  const language = 'en';

  const containerDiv = document.getElementById('container_eudic_note');
  const tokenInput = document.getElementById('token-input');

  function fetchData(token) {
    containerDiv.innerHTML = '<p>正在使用新的令牌请求数据...</p>';
    const requestUrl = `${apiUrl}?language=${language}&word=${wordToSearch}`;

    fetch(requestUrl, {
      method: 'GET',
      headers: {
        'Authorization': token,
        'Content-Type': 'application/json'
      }
    })
      .then(response => {
        if (!response.ok) {
          throw new Error(`网络响应错误，状态码: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        console.log('API 返回的数据:', data);

        let htmlContent = '';
        if (data && data.data) {
          const item = data.data;

          const cleanedNote = removeHtmlComments(item.note);
          const highlightedNote = highlightBoldHashtags(cleanedNote);

          htmlContent = `
                        <h2><span class="highlight-id">${item.word}</span></h2>
                        <p><strong>语言:</strong> ${item.language}</p>
                        <p><strong>添加时间:</strong> ${formatDate(item.add_time, 'YYYY-MM-DD HH:mm')}</p>
                        <div class="note-content">
                            ${highlightedNote}
                        </div>
                    `;
        } else {
          htmlContent = '<p>未找到相关数据或数据结构不正确。</p>';
        }
        containerDiv.innerHTML = htmlContent;
      })
      .catch(error => {
        console.error('动态请求失败:', error);
        containerDiv.innerHTML = `<p style="color:red;"><strong>请求失败：</strong>${error.message}</p><p>请检查您的授权令牌或网络连接是否正确。</p>`;
      });
  }

  const storedToken = localStorage.getItem('authorization_token');
  const finalToken = storedToken || hardcodedToken;

  if (!storedToken) {
    console.log("本地存储中未找到令牌，正在使用硬编码令牌。");
  } else {
    console.log("已从本地存储中找到令牌并使用。");
  }

  tokenInput.value = finalToken;
  fetchData(finalToken);

  tokenInput.addEventListener('blur', () => {
    const newToken = tokenInput.value.trim();
    if (newToken && newToken !== localStorage.getItem('authorization_token')) {
      localStorage.setItem('authorization_token', newToken);
      console.log("新令牌已保存到本地存储。正在重新请求数据...");
      fetchData(newToken);
    }
  });

  /**
   * 格式化日期时间字符串
   * @param {string} dateStr - 原始日期时间字符串
   * @param {string} format - 输出格式模板字符串
   * @returns {string} - 格式化后的日期时间字符串
   */
  function formatDate(dateStr, format) {
    // 尝试用 Date 对象解析日期字符串
    let date = new Date(dateStr);

    // 检查解析是否成功，如果失败则返回原始字符串
    if (isNaN(date.getTime())) {
      console.error('无效的日期字符串:', dateStr);
      return dateStr;
    }

    // 占位符和对应值的映射
    const o = {
      'M+': date.getMonth() + 1, // 月份
      'D+': date.getDate(), // 日
      'H+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      'S': date.getMilliseconds() // 毫秒
    };

    // 处理年份占位符 'YYYY'
    if (/(Y+)/.test(format)) {
      format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }

    // 替换其他占位符
    for (let k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
      }
    }

    return format;
  }
</script>